import React from 'react';
import Svg, { Circle, ClipPath, Defs, G, Path, Rect } from 'react-native-svg';

export const FacebookIcon = () => {
  return (
    <Svg width="16" height="17" viewBox="0 0 16 17" fill="none">
      <Circle cx="8" cy="8.5" r="8" fill="#BBBBBB" />
      <Path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M3.20117 8.35571C3.20117 5.68038 5.2972 3.69971 8.00118 3.69971C10.7052 3.69971 12.8012 5.68035 12.8012 8.35567C12.8012 11.031 10.7052 13.0117 8.00118 13.0117C7.51548 13.0117 7.04954 12.9476 6.61172 12.8272C6.52665 12.8037 6.43609 12.8104 6.35534 12.846L5.40261 13.2666C5.15339 13.3766 4.8721 13.1994 4.86374 12.9271L4.8376 12.0732C4.83437 11.968 4.78705 11.8697 4.70867 11.7995C3.77466 10.9643 3.20117 9.7551 3.20117 8.35571ZM6.52949 7.48037L5.11949 9.71736C4.98415 9.93204 5.24804 10.1739 5.45017 10.0205L6.96479 8.87109C7.01465 8.83326 7.07547 8.81269 7.13806 8.81251C7.20065 8.81232 7.26159 8.83254 7.31167 8.87008L8.43314 9.71121C8.76963 9.96358 9.24997 9.87497 9.47426 9.51913L10.8843 7.2821C11.0196 7.06742 10.7556 6.8255 10.5535 6.97892L9.03896 8.12837C8.98909 8.16622 8.92825 8.1868 8.86565 8.18698C8.80305 8.18717 8.74209 8.16694 8.69201 8.12938L7.57057 7.28825C7.23404 7.03588 6.75374 7.12449 6.52949 7.48037Z"
        fill="white"
      />
    </Svg>
  );
};

export const MessengerFilledIcon = () => {
  return (
    <Svg width="100%" height="100%" viewBox="0 0 20 20" fill="none">
      <Circle cx="10" cy="10" r="10" fill="#BBBBBB" />
      <Path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M4 9.82C4 6.47585 6.62003 4 10 4C13.38 4 16 6.4758 16 9.81996C16 13.1641 13.38 15.64 10 15.64C9.39288 15.64 8.81046 15.5598 8.26319 15.4093C8.15684 15.38 8.04364 15.3883 7.94271 15.4328L6.7518 15.9586C6.44027 16.0961 6.08866 15.8746 6.0782 15.5342L6.04553 14.4669C6.0415 14.3354 5.98235 14.2125 5.88438 14.1248C4.71686 13.0807 4 11.5692 4 9.82ZM8.15991 8.72582L6.39741 11.5221C6.22824 11.7904 6.5581 12.0928 6.81075 11.901L8.70403 10.4642C8.76635 10.4169 8.84238 10.3912 8.92062 10.391C8.99885 10.3908 9.07503 10.416 9.13763 10.463L10.5395 11.5144C10.9601 11.8298 11.5605 11.7191 11.8409 11.2743L13.6034 8.478C13.7725 8.20964 13.4426 7.90725 13.1899 8.09901L11.2967 9.53582C11.2344 9.58314 11.1584 9.60886 11.0801 9.60909C11.0019 9.60932 10.9257 9.58404 10.8631 9.53709L9.46125 8.48568C9.0406 8.17021 8.44022 8.28098 8.15991 8.72582Z"
        fill="white"
      />
    </Svg>
  );
};

export const InstagramFilledIcon = () => {
  return (
    <Svg width="100%" height="100%" viewBox="0 0 20 20" fill="none">
      <Circle cx="10" cy="10" r="10" fill="#BBBBBB" />
      <G clipPath="url(#clip0_2323_83371)">
        <Path
          d="M10 5.08113C11.602 5.08113 11.7918 5.08722 12.4245 5.11605C13.0095 5.14277 13.3272 5.2405 13.5386 5.32267C13.8187 5.43152 14.0185 5.56155 14.2285 5.7715C14.4385 5.98145 14.5685 6.18133 14.6773 6.46136C14.7595 6.67281 14.8572 6.99053 14.884 7.57548C14.9128 8.2082 14.9189 8.39795 14.9189 10C14.9189 11.602 14.9128 11.7918 14.884 12.4245C14.8572 13.0095 14.7595 13.3272 14.6773 13.5386C14.5685 13.8187 14.4385 14.0186 14.2285 14.2285C14.0185 14.4385 13.8187 14.5685 13.5386 14.6773C13.3272 14.7595 13.0095 14.8573 12.4245 14.884C11.7919 14.9128 11.6021 14.9189 10 14.9189C8.39786 14.9189 8.20806 14.9128 7.57548 14.884C6.99048 14.8572 6.67281 14.7595 6.46136 14.6773C6.18133 14.5685 5.98141 14.4385 5.77145 14.2285C5.5615 14.0185 5.43147 13.8187 5.32267 13.5386C5.2405 13.3272 5.14272 13.0095 5.11605 12.4245C5.08717 11.7918 5.08108 11.6021 5.08108 10C5.08108 8.39791 5.08717 8.2082 5.11605 7.57553C5.14277 6.99053 5.2405 6.67281 5.32267 6.46136C5.43147 6.18133 5.5615 5.98145 5.77145 5.7715C5.98145 5.5615 6.18133 5.43152 6.46136 5.32267C6.67277 5.2405 6.99048 5.14277 7.57548 5.11605C8.20816 5.08722 8.39791 5.08113 10 5.08113ZM10 4C8.37048 4 8.16616 4.00689 7.52622 4.03609C6.88755 4.06525 6.45138 4.16669 6.06977 4.315C5.67517 4.46833 5.34058 4.6735 5.00702 5.00706C4.67345 5.34062 4.46833 5.67522 4.315 6.06977C4.16664 6.45142 4.06525 6.88759 4.03609 7.52622C4.00689 8.16616 4 8.37048 4 10C4 11.6295 4.00689 11.8338 4.03609 12.4738C4.06525 13.1125 4.16664 13.5486 4.315 13.9302C4.46828 14.3248 4.67345 14.6594 5.00702 14.993C5.34058 15.3265 5.67517 15.5317 6.06977 15.685C6.45142 15.8334 6.88755 15.9347 7.52617 15.9639C8.16616 15.9931 8.37048 16 10 16C11.6295 16 11.8338 15.9931 12.4738 15.9639C13.1124 15.9347 13.5486 15.8334 13.9302 15.685C14.3248 15.5317 14.6594 15.3265 14.9929 14.993C15.3265 14.6594 15.5317 14.3248 15.685 13.9302C15.8333 13.5486 15.9347 13.1125 15.9639 12.4738C15.9931 11.8338 16 11.6295 16 10C16 8.37048 15.9931 8.16616 15.9639 7.52622C15.9347 6.88759 15.8333 6.45142 15.685 6.06981C15.5317 5.67522 15.3265 5.34062 14.9929 5.00706C14.6594 4.6735 14.3248 4.46828 13.9302 4.315C13.5486 4.16669 13.1124 4.06525 12.4738 4.03609C11.8338 4.00689 11.6295 4 10 4ZM10 6.91891C8.29834 6.91891 6.91891 8.29844 6.91891 10C6.91891 11.7016 8.29834 13.0811 10 13.0811C11.7016 13.0811 13.0811 11.7017 13.0811 10C13.0811 8.29839 11.7016 6.91891 10 6.91891ZM10 12C8.89544 12 7.99998 11.1046 7.99998 10C7.99998 8.89544 8.89544 7.99998 10 7.99998C11.1046 7.99998 12 8.89544 12 10C12 11.1046 11.1046 12 10 12ZM13.9228 6.79717C13.9228 7.19486 13.6005 7.51717 13.2028 7.51717C12.8051 7.51717 12.4828 7.19486 12.4828 6.79717C12.4828 6.39948 12.8051 6.07717 13.2028 6.07717C13.6004 6.07717 13.9228 6.39953 13.9228 6.79717Z"
          fill="white"
        />
      </G>
      <Defs>
        <ClipPath id="clip0_2323_83371">
          <Rect width="12" height="12" fill="white" transform="translate(4 4)" />
        </ClipPath>
      </Defs>
    </Svg>
  );
};

export const FacebookFilledIcon = () => {
  return (
    <Svg width="100%" height="100%" viewBox="0 0 20 20" fill="none">
      <Circle cx="10" cy="10" r="10" fill="white" />
      <Path
        d="M20 10C20 4.48 15.52 0 10 0C4.48 0 0 4.48 0 10C0 14.84 3.44 18.87 8 19.8V13H6V10H8V7.5C8 5.57 9.57 4 11.5 4H14V7H12C11.45 7 11 7.45 11 8V10H14V13H11V19.95C16.05 19.45 20 15.19 20 10Z"
        fill="#BBBBBB"
      />
    </Svg>
  );
};
